<template>
	<view class="main">
		<view class="">
			<commTitle title="需求分类">
				<view class="desc">
					您想要发布什么类别的技术需求？
				</view>
			</commTitle>

			<view class="categories">
				<view class="category-item" v-for="(c, index) in requireList" :key="index" @click="selectCategory(index)">
					<image class="category-item-img" :src="c.icon" mode=""></image>
					<view v-bind:class="[currentTypeIndex===index? 'category-item-title' : 'category-item-title-normal']">
						{{c.title}}
					</view>
					<image v-if="currentTypeIndex===index" class="gouxuan" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/gouxuan.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="">
			<commTitle title="需求主题">

			</commTitle>

			<view class="extra-textarea-title">
				<textarea maxlength="30" v-model="formData.title" class="extra-textarea-input" placeholder="请输入需求主题" />
			</view>
		</view>

		<view class="">
			<commTitle title="补充描述">

			</commTitle>

			<view class="extra-textarea">
				<textarea maxlength="140" v-model="formData.note" class="extra-textarea-input" placeholder-style="color:#999999;font-weight:400;"
				 placeholder="请简要描述采购产品的用途、市场规模，以及新产品达到的效果等…" />
				</view>
		</view>
		<view class="select-time-cell">
				<view class="time-title">
				    截止时间
				</view>
				
				<view class="flex-row">
				<view class="uni-list-cell-db">
				    <picker mode="date" :value="formData.endDate" :start="startDate" :end="endDate" @change="bindDateChange">
				        <view class="uni-input">{{formData.endDate}}</view>
				    </picker>
				</view>
			
			<uni-icons  :size="20" class="uni-icon-wrapper" color="#2B3754" type="arrowright" />
			</view>
		</view>
		
		<view class="select-time-cell" @click="showTechField">
				<view class="time-title">
				    技术领域
				</view>
				
				<view class="flex-row">
				<view class="tech-field-desc">{{technicalFieldDescTips}}</view>
				<uni-icons  :size="20" class="uni-icon-wrapper" color="#2B3754" type="arrowright" />
			</view>
		</view>
		
		
		<!-- 发布 -->
		<view class="btn-submit" @click="submit">
			发布
		</view>
		
		
		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<cover-view class="popup-title">
					技术领域
				</cover-view>
				<cover-view class="tech-field-panel">
					<block v-for="(c, index) in techFields" :key="index">
						<cover-view  v-bind:class="[c.selected? 'tech-item' : 'tech-item-normal']"   @click="selectTechField(index)">
							<cover-view  v-bind:class="[c.selected? 'category-item-title' : 'category-item-title-normal']">
								{{c.desc}}
							</cover-view>
							<cover-image v-if="c.selected" class="gouxuan" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/gouxuan.png" mode=""></cover-image>
						</cover-view>
					</block>
					
				</cover-view>
				<view class="footer-btns">
					<view class="footer-cancel" @click="resetTechField">
						重置
					</view>
					
					<view class="footer-ok" @click="closePop">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		
		</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import {login } from '@/utils/apis.js'
	
	import commTitle from '@/pages/components/comm-title.vue';
	import {mapState,mapMutations} from 'vuex';
	
	export default {
	    components: {uniList,uniListItem,ruiDatePicker,uniPopup,commTitle},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {  
			            time: '12:01',
						formData:{
							title:'',
							note:'',
							endDate:currentDate,
							type:'',
							technicalFieldDesc:'',
							technicalField:''
						}
						
			        }
		},
		computed: {
			...mapState('userStore',['hasLogin','hasBindPhone']),
			...mapState('requirementStore',['requireList','techFields','currentTypeIndex','selectTechFieldIds','selectTechFieldDesc','technicalFieldDescTips']),
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
			onShow() {
				this.loadTechField();
				this.loadTypes();
			},
		methods: {
			...mapMutations('requirementStore',['saveTypes','saveTechFields','saveTypeIndex','updateTechFieldState','resetTechFieldState','saveFormData']),
			
			loadTypes(){
				this.$request.get({
					url: 'queryNeedType',
					data: {},
				}).then(res => {
					this.saveTypes(res);
				}, res => {});
			},
		
			resetTechField(){
				this.resetTechFieldState();
			},
			verifyFormData(cb){
				const type = this.requireList[this.currentTypeIndex];
				this.formData.type = type.id;
				if(this.formData.title.length === 0){
					uni.showToast({
					    title: '请输入需求主题',
					    duration: 2000,
					    icon: 'none'
					})
					return;
				}
				
				if(this.formData.note.length === 0){
					uni.showToast({
					    title: '请输入补充描述',
					    duration: 2000,
					    icon: 'none'
					})
					return;
				}
				if(this.selectTechFieldIds.length === 0){
					uni.showToast({
					    title: '请选择技术领域',
					    duration: 2000,
					    icon: 'none'
					})
					return;
				}
				cb && cb();
				
			},
			submit(){
				//检测 是否已经登录 或者信息完善
				if(this.hasLogin===false || this.hasBindPhone === false){
					//完善信息
					// this.saveFormData(this.formData);
					uni.navigateTo({
						url:"/pagesB/registe-info/registe-info"
					});
					return;
				}
				this.verifyFormData(()=>{
						this.formData.technicalField = this.selectTechFieldIds;
						this.formData.technicalFieldDesc = this.selectTechFieldDesc;
						this.$request.get({
							url: 'setNeedInfo',
							data: this.formData,
							loadingTip:'正在处理...'
						}).then(res => {
							uni.redirectTo({
								url:"/pagesB/public-success/public-success"
							});
							this.resetTechField();
							this.saveFormData(null);
						}, res => {
						});
					// }
					// else{
						//暂存 表单信息
						
					// }
				});
			},
			selectCategory(index){
				this.saveTypeIndex(index);
			},
			closePop(){
				this.$refs.popup.close();
			},
			openPop(){
				this.$refs.popup.open();
			},
			selectTechField(index){
				this.updateTechFieldState(index);			
			},
			loadTechField(){
				this.$request.get({
					url: 'queryTechnicalField',
					data: {},
				}).then(res => {
					this.saveTechFields(res);
				}, res => {});
			},
			showTechField(){
				this.openPop();
				const params = {};
				this.$request.post({
					url: 'user/login',
					data: params,
					success: res => {
					},
					fail: res => {
					}
				});
			},
			bindPickerChange: function(e) {
			            this.index = e.target.value
			        },
			        bindDateChange: function(e) {
						this.formData.endDate = e.target.value;
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
	.footer-btns{
		display: flex;
		width: 100%;
		height: 98upx;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	
	.footer-cancel{
		display: flex;
		flex: 1;
		height: 98upx;
		background-color: #FFFFFF;
		color: #999999;
		font-size: 36upx;
		line-height: 98upx;
		text-align: center;
		/* width: 100%; */
		align-items: center;
		justify-content: center;
		/* padding-top: 30upx; */
	}
	
	.footer-ok{
		display: flex;
		flex: 1;
		height: 98upx;
		background-color: #268CFF;
		color: #FFFFFF;
		font-size: 36upx;
		line-height: 98upx;
		text-align: center;
		/* width: 100%; */
		align-items: center;
		    justify-content: center;
			/* padding-top: 30upx; */
	}
	.main{
		padding: 0 32upx;
		box-sizing: border-box;
		overflow: hidden;
	}
.tech-content{
	height: 200upx;
	background-color: #FFFFFF;
}
.select-time-cell{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	padding: 0 28rpx;
	box-sizing: border-box;
	
	
	background: #FFFFFF;
	box-shadow: 0 0 24upx 0 rgba(56,73,184,0.10);
	border-radius: 8px;
	height: 98upx;
	margin-bottom: 20upx;
}

.flex-row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.gouxuan{
	position: absolute;
	right: 0upx;
	bottom: 0upx;
	width: 40upx;
	height: 40upx;
}

.categories{
	padding: 20upx 20upx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.popup-content{
	width: 100%;
}

.popup-title{
	height: 98upx;
	line-height: 98upx;
	font-size: 36upx;
	color: #2B3754;
	text-align: center;
	background-color: #FFFFFF;
	padding-top: 30upx;
	box-sizing: border-box;
}

.tech-field-panel{
	background-color: #FFFFFF;
	padding: 20upx 20upx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.tech-field-desc{
	color: #999999;
	font-size: 26upx;
}

.time-title{
	font-size: 30upx;
	color: #48526B;
	overflow: hidden;
	width: 120upx;
}

.desc {
		color: #999999;
		font-size: 26upx;
	}
	
	.tech-item-normal{
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;
			
		box-shadow: 0 0 24px 0 rgba(56,73,184,0.08);
		border-radius: 8upx;
		background-color: #F5F5F5;
	}
	
	.tech-item{
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;
			
		box-shadow: 0 0 24px 0 rgba(56,73,184,0.08);
		border-radius: 8upx;
		background-color: #E1F2FE;
	}
	
	.category-item{
		width: 300upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		margin-top: 20upx;
	
		box-shadow: 0 0 24px 0 rgba(56,73,184,0.08);
		border-radius: 8upx;
	}
	.category-item-title-normal{
		font-size: 28upx;
		color: #48526B;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}
	.category-item-title{
		font-size: 28upx;
		color: #268CFF;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}
	
	.category-item-img{
		width: 48upx;
		height: 48upx;
		/* margin-right: 16upx; */
		margin-left: 28upx;
	}
	
	.theme-wrapper{
		background: #F8F8F8;
		border-radius: 16upx;
		width: 100%;
		margin: 0 auto;
		height: 98upx;
	}
	
	.uni-input{
		color: #48526B;
		font-size: 24upx;
	}
	
	.theme-input{
		line-height: 98upx;
		height: 98upx;
		padding-left: 20upx;
		box-sizing: border-box;
	}
	
	.extra-textarea{
		background: #F8F8F8;
		border-radius: 16upx;
		width: 100%; 
		/* margin: 0 30upx; */
		height: 220upx;
		padding: 28upx 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		}
		
		.extra-textarea-title{
			background: #F8F8F8;
			border-radius: 16upx;
			width: 100%; 
			/* margin: 0 30upx; */
			height: 120upx;
			padding: 28upx 20upx;
			box-sizing: border-box;
			margin-bottom: 20upx;
		}
		
		.extra-textarea-input{
			height: 220upx;
			width: 100%;
		}
		
		.extra-textarea-input-text{
			height: 220upx;
			width: 100%;
			/* font-size: 28upx; */
			color: #999999;
			font-weight: 400;
			
		}
		
		.btn-submit{
			margin-top: 40upx;
			margin-bottom: 80upx;
			background-image: linear-gradient(-182deg, #0BC8FD 0%, #0497FA 100%);
			border-radius: 45upx;
			text-align: center;
			height: 98upx;
			line-height: 98upx;
			color: #FFFFFF;
		}
</style>
